<template>
  <div class="container">
    <div class="header">
      <span
        >【题型】:
        <i v-if="detailInfo.questionType == 1">单选题</i>
        <i v-if="detailInfo.questionType == 2">多选题</i>
        <i v-if="detailInfo.questionType == 3">简答题</i>
      </span>
      <span>【编号】:{{ info.id }}</span>
      <span
        >【难度】:
        <i v-if="detailInfo.difficulty == 1">简单</i>
        <i v-if="detailInfo.difficulty == 2">一般</i>
        <i v-if="detailInfo.difficulty == 3">困难</i>
      </span>
      <span>【标签】:{{ detailInfo.tags }}</span>
      <span>【学科】:{{ detailInfo.subjectID }}</span>
      <span>【目录】:{{ detailInfo.catalogID }}</span>
      <span>【方向】:{{ detailInfo.direction }}</span>
    </div>
    <hr />
    <div>【题干】:</div>
    <div v-html="detailInfo.question">1+1dengyuji</div>
    <div>
      <i v-if="detailInfo.questionType == 1">单选题</i>
      <i v-if="detailInfo.questionType == 2">多选题</i>
      <i v-if="detailInfo.questionType == 3">简答题</i>
      选项: (一下选中的选项位正确答案)
    </div>
    <nav v-if="detailInfo.questionType == 1">
      <div v-for="item in detailInfo.options" :key="item.id">
        <el-radio :value="radio" :label="item.code">{{ item.title }}</el-radio>
      </div>
    </nav>
    <nav v-if="detailInfo.questionType == 2">
      <div v-for="item in detailInfo.options" :key="item.id">
        <el-checkbox :value="checkList" :label="item.code">{{ item.title }}</el-checkbox>
      </div>
    </nav>

    <hr />
    <div>【参考答案】: <el-button type="danger" size="default" @click="$refs.video.style.display = 'block'">视频答案预览</el-button></div>
    <video :src="detailInfo.videoURL" autoplay controls muted hidden ref="video"></video>
    <hr />
    <div>【答案解析】:{{ detailInfo.remarks }}</div>
    <hr />
    <div>【题目备注】:{{ detailInfo.remarks }}</div>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
import articles from '../pages/articles.vue'
export default {
  components: { articles },
  data() {
    return {
      radio: '',
      checkList: [],
      detailInfo: {}
    }
  },
  props: {
    info: {
      type: Object,
      required: true
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 获取详细题库的信息
    async getDetail() {
      let { data: res } = await detail(this.info)
      this.detailInfo = res
      let item = res.options.find((item) => item.isRight == 1)
      this.radio = item && item.code
      this.checkList = res.options.filter((item) => {
        if (item.isRight == 1) {
          return item.code
        }
      })
      if (this.checkList) this.checkList = this.checkList.map((item) => item.code)
    }
  }
}
</script>

<style scoped>
.header span {
  float: left;
  width: 25%;
  height: 30px;
  line-height: 30px;
  text-align: left;
}
.container > div {
  min-height: 35px;
  line-height: 35px;
}
div.header {
  overflow: hidden;
  height: 70px;
}
video {
  width: 400px;
  height: 300px;
}
</style>
